<template>
	<view class="vf-title" :style="{backgroundColor: bgColor}">
		<view></view>
		<view class="xiushi-title">
			<text class="xiushi-title-line" :style="{backgroundColor: lineColor}"></text>
			<text class="xiushi-title-kuai" :style="{backgroundColor: lineColor}"></text>
			<text class="xiushi-title-txt" :style="{color: titleColor}">{{ title }}</text>
			<text class="xiushi-title-kuai" :style="{backgroundColor: lineColor}"></text>
			<text class="xiushi-title-line" :style="{backgroundColor: lineColor}"></text>
		</view>
		<view class="more" v-if="more" @click="moreClick">
			<text class="more-txt">更多</text>
			<uni-icons type="arrowright" size="24" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			lineColor: {
				type: String,
				default: '#333'
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			more: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			
			moreClick() {
				this.$emit('moreClick')
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.vf-title{
	height: 88rpx;
	@include flex-row;
	justify-content: space-between;
	position: relative;
	padding: 0 24rpx;
}
.more{
	@include flex-row;
	align-items: center;
	&-txt{
		font-size: 24rpx;
		color: #666;
	}
}
.xiushi-title{
	width: 600rpx;
	height: 88rpx;
	@include flex-row;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 75rpx;
	&-txt{
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin: 0 20rpx;
	}
	&-kuai{
		width: 10rpx;
		height: 10rpx;
		background-color: #333;
		transform: rotate(45deg);
	}
	&-line{
		width: 42rpx;
		height: 2rpx;
		background-color: #333;
		margin: 0 14rpx;
	}
}
</style>
